<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ElementUI 风格登录页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="../../lib/jquery-3.5.1.min.js"></script>
    <script src="../../lib/axios.min.js"></script>
    <script type="module" src="../api/user.js"></script>
    <style>
      .el-message {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 10px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            z-index: 9999;
        }

      .el-message--success {
            background-color: #f0f9eb;
            color: #67c23a;
        }

      .el-message--error {
            background-color: #fef0f0;
            color: #f56c6c;
        }
    </style>
</head>

<body class="bg-gray-100 flex justify-center items-center h-screen">
    <div class="bg-white p-8 rounded shadow-md w-full max-w-md">
        <h2 class="text-2xl font-bold mb-6 text-center">登录</h2>
        <form id="loginForm">
            <div class="mb-4">
                <label for="username" class="block text-gray-700 text-sm font-bold mb-2">用户名</label>
                <input type="text" id="username" name="username"
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                    placeholder="请输入用户名">
            </div>
            <div class="mb-6">
                <label for="password" class="block text-gray-700 text-sm font-bold mb-2">密码</label>
                <input type="password" id="password" name="password"
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                    placeholder="请输入密码">
            </div>
            <div class="flex justify-center">
                <button type="submit" id="submit"
                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">登录</button>
            </div>
        </form>
    </div>

    <script type="module">
        import {checkname,login} from '../api/user.js'
        $(document).ready(function () {
            // checkname
            $("#username").focus(function(){
                $(this).val("")
            }).blur(function() {
                var name = $(this).val()
                var jsonName = {
                    "username":name
                }
                if(name.length == 0) {
                    showMessage("用户名不能为空", 'error');
                    return
                }
                // 发请求
                checkname(name)
                .then(function(res) {
                    if(res.status == "true") {
                        showMessage('用户存在', 'success');
                    }
                    else {
                        showMessage("用户不存在", 'error');
                    }
                    // console.log(res)
                    
                })
            })

            //login 
            $('#submit').click( function (e) {
                e.preventDefault();
                var username = $('#username').val();
                var password = $('#password').val();
                login(username,password)
                .then(function(res) {
                    if(res.status == "true") {
                        showMessage('登录成功', 'success');
                        window.location.href = "http://localhost:8000/src/views/usermanage.html"
                    }
                    else {
                        showMessage("用户名或密码错误", 'error');
                    }
                })
                // 模拟登录验证
                // if (username === 'admin' && password === '123456') {
                //     showMessage('登录成功', 'success');
                // } else {
                //     showMessage('用户名或密码错误', 'error');
                // }
            });

            function showMessage(message, type) {
                var messageClass = type === 'success' ? 'el-message--success' : 'el-message--error';
                var $message = $('<div>', {
                    class: `el-message ${messageClass}`,
                    text: message
                });
                $('body').append($message);
                setTimeout(function () {
                    $message.fadeOut(300, function () {
                        $(this).remove();
                    });
                }, 3000);
            }
        });
    </script>
</body>

</html>
    